<template>
  <div id="app">
    <!-- 导航 -->
    <nav class="nav-box">
      <router-link to="/">首页</router-link>
      <router-link to="/product">产品中心</router-link>
      <router-link
        :to="{
          path: '/personal',
          query: {
            name: 'xxx',
            age: 18,
          },
        }"
      >
        个人中心
      </router-link>
    </nav>

    <!-- 路由容器 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style lang="less">
.nav-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  a {
    margin-right: 10px;
    padding: 5px 15px;
    border: 1px solid #ddd;
    color: #000;
    text-decoration: none;
    font-size: 14px;

    &.router-link-exact-active {
      color: red;
      background: lightblue;
    }
  }
}
</style>